<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" text="width=device-width, initial-scale=1.0">
  <title>todo</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.7/vue.min.js"></script>
  <style>
    .todo_list li .completed {
      text-decoration: line-through;
      color: #d9d9d9;
    }

    li {
      cursor: pointer;
    }

    .num_list {
      display: flex;
      justify-content: space-between;
    }

    .num_list li {
      margin-right: 20px;
    }

    .active {
      color: red;
      border: 1px solid rgba(175, 47, 47, 0.2);
      padding: 2px 5px;
      color: inherit;
      font-size: 14px;
      border-radius: 5px;
    }

    .li_box:hover {
      border: 1px solid rgba(175, 47, 47, 0.1);
      padding: 2px 5px;
      border-radius: 5px;
    }

    .li_box {
      margin-left: -25px;
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }

    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }

    #icon {
      color: rgb(93, 194, 175);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul li {
      display: inline-block;
    }

    #app {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #4d4d4d;
      background: #f5f5f5;
    }

    h4 {
      width: 100%;
      font-size: 100px;
      font-weight: 100;
      text-align: center;
      /* margin-left: 360px; */
      color: rgba(175, 47, 47, 0.15);
    }

    .box {
      display: flex;
      flex-direction: column;
      background: #fff;
      width: 550px;
      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%), 0 25px 50px 0 rgb(0 0 0 / 10%);
      border: 1px solid #c9c9c9;
    }

    .todo {
      position: relative;
      color: #4d4d4d;
      font-weight: 300;
    }

    .one {
      position: absolute;
      top: 25px;
      left: 20px;
    }

    .one .icon-xiajiantou1 {
      font-weight: 900;
      color: rgb(230, 230, 230);
    }

    .two {
      position: absolute;
      top: 25px;
      left: 20px;
    }


    .two .icon-xiajiantou1 {
      font-weight: 900;
      color: #737373;
    }

    .inp_1 {
      height: 65px;
      width: 100%;
      font-size: 24px;
      font-family: inherit;
      padding-left: 60px;
      line-height: 65px;
      background: rgba(0, 0, 0, 0.003);
      box-shadow: inset 0 -2px 1px rgb(0 0 0 / 3%);
      font-weight: 200;
      font-style: italic;
      color: inherit;
      border: none;
      outline: none;
    }

    .inp_1::-webkit-input-placeholder {
      color: #e6e6e6;
    }

    ol {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 550px;
    }

    .todo_list {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .todo_list li {
      position: relative;
      display: flex;
      justify-content: space-between;
      height: 58px;
      font-size: 24px;
      line-height: 58px;
      border-bottom: 1px solid #ededed;
    }

    .todo_list li:hover .icon-cuowutishi {
      display: block;
    }

    .todo_list li .check {
      width: 30px;
      height: 30px;
      position: absolute;
      left: 15px;
      top: 20px;
      border: 1px solid #f1f1f1;
      border-radius: 50%;
    }

    .todo_list li .check .icon-duihao {
      float: right;
      font-size: 20px;
      color: rgb(93, 194, 175);
      text-align: center;
      line-height: 30px;
      margin-right: 3px;
      opacity: 0;
    }

    .todo_list li .check_1 {
      width: 30px;
      height: 30px;
      position: absolute;
      left: 15px;
      top: 20px;
      border: 1px solid rgba(93, 194, 175, 0.8);
      border-radius: 50%;
    }

    .todo_list li .check_1 .icon-duihao {
      float: right;
      font-size: 20px;
      color: rgb(93, 194, 175);
      text-align: center;
      line-height: 30px;
      margin-right: 3px;
      opacity: 1;
    }

    .todo_list li div {
      width: 100%;
      color: #4d4d4d;
      font-weight: 300;
      margin-left: 60px;
    }

    .icon-cuowutishi {
      float: right;
      display: none;
      margin-right: 30px;
      color: rgba(175, 47, 47, 0.4);
      font-weight: 700;
    }

    .num_list {
      display: flex;
      align-items: center;
      height: 50px;
      margin-left: 10px;
      color: #777777;
      font-size: 10px;
    }

    .inp_2 {
      width: 550px;
      padding-left: 60px;
      font-size: 24px;
      font-weight: inherit;
      padding-top: 20px;
      padding-bottom: 20px;
      line-height: 24px;
      border: none;
      outline: none;
      border-bottom: 2px solid #ececec;
      background: #f5f5f5;
      font-weight: 200;
      margin-bottom: 60px;
      margin-top: 30px;
    }

    p {
      font-size: 12px;
      text-shadow: 0 1px 0 rgb(255 255 255 / 50%);
      text-align: center;
      margin-bottom: 10px;
    }

    .under_one {
      background: #f5f5f5;
      width: 540px;
      height: 5px;
      border: 1px solid #dddddd;
    }

    .under_two {
      background: #f5f5f5;
      width: 530px;
      height: 5px;
      border: 1px solid #dddddd;
    }

    .num_list .clear {
      line-height: 10px;
      text-decoration: none;
      cursor: pointer;
      font-size: 10px;
    }

    .num_list .clear:hover {
      border-bottom: 1.5px solid #777;
    }

    .inp_3 {
      width: 100%;
      height: 58px;
      font-size: 24px;
      line-height: 58px;
      border: 1px solid #e6e6e6;
      transition: color 0.4s;
      outline: none;
      color: #4d4d4d;
      font-weight: 400;
      box-shadow: -5px 5px -5px 5px rgb(0 0 0 / 3%);
    }
  </style>
  <!-- <link rel="stylesheet" href="css/todo1.css"> -->
  <link rel="stylesheet" href="//at.alicdn.com/t/font_3118140_y1e63a7leym.css">
</head>

<body>
  <div id="app">
    <h4>todos</h4>
    <div class="box">

      <div class="todo">
        <div class="one" :class="{two:changeColor === true}">
          <i class="iconfont icon-xiajiantou1"></i>
          <input type="checkbox" style="position: absolute;top:5px;left:0px;opacity: 0;" @change="allCheck"
            v-model="allChecked">
        </div>
        <input class="inp_1" type="text" v-model="text" @keyup.enter="addTodo" placeholder="你准备做些什么？"
          autofocus="autofocus" autocomplete="off" />
      </div>
      <transition-group name="list" appear tag="ul" class="todo_list" v-if="todoListSearchComputed.length">
        <li class="todo" v-for="(todo, index) in todoListSearchComputed" :key="todo.id">
          <span class="check" :class="{check_1: todo.completed === true}">
            <i class="iconfont icon-duihao" :class="{i:todo.completed}"></i>
            <input type="checkbox" style="position: absolute;top: 30%;left: 30%;opacity: 0;" @change="checkedTodo"
              class="toggle" @input="todo.completed = !todo.completed">
          </span>
          <div @dblclick="onStartEdit(todo)" :class="{ completed: todo.completed === true}" v-if="!todo.isEdit">
            {{ todo.text }}
            <i class="iconfont icon-cuowutishi" @click.stop="deleteTodo(index)"></i>
          </div>
          <!-- 双击编辑 -->
          <div v-else>
            <input type="text" class="inp_3" :value="todo.text"
              @input="(e) => editTodo(e,todo)"
              >
          </div>
        </li>
      </transition-group>

      <!-- <ol> -->

      <ul class="num_list" v-show="todoList.length">
        <li style="margin-right: 150px; font-weight: 400;">{{ todoList.length - completedNum }}
          <span style="font-weight: 300;font-weight: 500;">{{ (todoList.length - completedNum) !== 1 ? 'items left' :
            'item left'}}</span>
        </li>
        <li class="li_box" @click="currentStatus = 'ALL'" :class="{active:currentStatus === 'ALL'}">All
        </li>
        <li class="li_box" @click="currentStatus = 'COMPLETED'" :class="{active: currentStatus === 'COMPLETED'}">
          completed
        </li>
        <li class="li_box" @click="currentStatus = 'TODO'" :class="{active: currentStatus === 'TODO'}">todo
        </li>
        <li class="clear" @click="clearTodo">Clear Completed</li>
      </ul>
    </div>
    <div class="under_one" v-show="todoList.length"></div>
    <div class="under_two" v-show="todoList.length"></div>


    <input class="inp_2" type="text" v-model="searchKey" placeholder="搜索代办事项" />

    <!-- </ol> -->
    <h3 v-else>暂无数据</h3>
    <p>
      本章无任何新增功能，甚至删掉了一些小功能。本章只是给这套 TODO 应用换了个皮肤。
    </p>
    <code>
      {{ JSON.stringify(todoList) }}
    </code>
  </div>
  <template id="tmpl">

  </template>

  <script>
    new Vue({
      el: '#app',
      data: {
        beforeEditCache: '',
        allChecked: '',
        changeColor: '',
        text: '',
        searchKey: '',
        currentStatus: 'ALL', // 'ALL、COMPLETED、TODO'
        todoList: localStorage.todoList ? JSON.parse(localStorage.todoList) : [],
      },


      computed: {
        completedNum() {
          const completedList = this.todoList.filter(function (item) {
            return item.completed === true
          })
          return completedList.length
        },
        todoListComputed() {
          var currentStatus = this.currentStatus
          var todoList = this.todoList
          if (currentStatus === 'ALL') {
            return todoList
          } else if (currentStatus === 'COMPLETED') {
            return todoList.filter(function (item) {
              return item.completed === true
            })
          } else {
            return todoList.filter(function (item) {
              return item.completed === false
            })
          }
        },
        todoListSearchComputed() {
          var todoListComputed = this.todoListComputed
          var searchKey = this.searchKey.trim()
          if (!searchKey) {
            return todoListComputed
          } else {
            return this.todoListComputed.filter(function (item) {
              return item.text.includes(searchKey)
            })
          }
        },
      },
      watch: {
        todoList: {
          deep: true,
          immediate: true,
          handler(val) {
            localStorage.todoList = JSON.stringify(val) //JSON.stringify（）转化为字符串
            //它会一层层遍历，给这个对象的所有属性都加上这个监听器。但是这样性能开销会比较大，修改任何一个属性，都会出发这个监听器里的handler.
          }
        },

      },
      directives: {
        'todo-focus': (el, binding) => {
          console.log(el);
          if (el.value) {
            // el.focus();
            console.log(222);
          }
        }
      },

      methods: {
        editTodo(e, todo) {
          console.log(todo)
          todo.text = e.target.value
        },
        onStartEdit(todo) {
          todo.isEdit = true
          this.beforeEditCache = todo.text

        },
        cancelEdit(todo) {
          todo.text = this.beforeEditCache
          todo.isEdit = false
        },
        clearTodo() {
          this.todoList = this.todoList.filter(function (item) {
            return item.completed === false
          })

        },
        checkedTodo() {
          // this.completed = !this.completed
          console.log(111);
          this.allChecked = this.todoList.every(function (item) {
            return item.completed === true
          })
          this.changeColor = this.allChecked
          console.log(this.allChecked);
        },
        allCheck(e) {
          this.changeColor = !this.changeColor
          val = e.target.checked
          this.todoList = this.todoList.map(function (item) {
            return {
              text: item.text,
              completed: val,
              isEdit: false,
              del: false,
              checked: val,
              id: item.id,
            }
          })
        },
        deleteTodo(index) {
          this.todoList.splice(index, 1)
        },
        addFirst(index) {
          const firstTodo = this.todoList.splice(index, 1)
          this.todoList.unshift(firstTodo[0])
        },

        addTodo() {
          var text = this.text.trim()
          if (!text) {
            alert('请输入内容')
            return
          }
          var newTodo = this.todoList.push({
            text: text,
            completed: false,
            isEdit: false,
            id: Math.random()
          })
          this.text = ''
        },
      }
    })
  </script>
</body>

</html>